<template>
    <div class="comments">
        <div class="item" hover-class="hoverc" v-for="(item, index) in commentsList" :key="index">
            <div class="fleft">
                <img :src="item.avatarUrl" alt="">
            </div>
            <div class="fright">
                <div class="nickName">{{item.nickName}}</div>
                <div class="content">{{item.content}}</div>
                <div class="time">{{item.create_time}}</div>
            </div>
        </div>
        <div v-show="!more" class="more">不能再拉了！</div>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { formatTime } from "@/utils/index";
export default {
  computed: {
    ...mapState(["more"]),
    commentsList() {
      return this.$store.state.commentsList;
    }
  },
  methods: {
    ...mapActions(["getComments"]),
    async getList(init) {
      let lastList = this.$store.state.commentsList;
      if (init) {
        this.$store.state.more = true;
        this.$store.state.page = 1;
      }
      await this.getComments({
        id: this.$root.$mp.query.id,
        page: this.$store.state.page,
        size: this.$store.state.size
      }).then(res => {
        let list = res.data.list;
        list.map((item, index) => {
          item.create_time = formatTime(item.create_time);
        });
        if (list.length < 1) {
          this.$store.state.more = false;
          this.$store.state.commentsList = lastList;
          return;
        } else {
          this.$store.state.more = true;
          this.$store.state.commentsList = list;
        }
        if (!init) {
          console.log(333);
          this.$store.state.commentsList = lastList.concat(list);
        } else {
          this.$store.state.more = true;
        }
      });
    }
  },
  async onLoad() {
    this.getList(true);
  },
  onPullDownRefresh: function() {
    this.getList(true);
  },
  onReachBottom() {
    if (!this.$store.state.more) {
      return;
    }
    this.$store.state.page += 1;
    this.getList(false);
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/varibles.scss";
.more {
  text-align: center;
  font-size: $fontSize3;
  padding: 20rpx 0;
  color: #444;
}
.comments {
  margin-top: 40rpx;
  border-top: 1rpx solid $borderColor;
  .hoverc {
    background: $hoverBg;
  }
  .item {
    display: flex;
    padding: 30rpx 20rpx;
    .fleft {
      padding-top: 20rpx;
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
      img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
    }
    .fright {
      flex: 1;
      font-size: $fontSize2;
      .nickName {
        color: #00a9ee;
        margin-bottom: 16rpx;
      }
      .content {
        word-break: break-all;
        overflow: auto;
      }
      .time {
        margin-top: 10rpx;
        color: #888;
        font-size: 24rpx;
      }
    }
  }
}
</style>

